<template>
  <div class="header">
    <div class="icon">
      <el-icon v-if="isClose" @click="change">
        <Expand />
      </el-icon>
      <el-icon v-else="isClose" @click="change">
        <Fold />
      </el-icon>
    </div>

    <div class="right">
      <div class="time">
        {{ time }}
      </div>
      <div class="line">
        |
      </div>
      <div class="loginOut" @click="out">
        <el-icon><SwitchButton /></el-icon>
      </div>

    </div>
  </div>
  <div class="wrapper" >
    <router-view></router-view>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';

// 使用 defineProps 和 defineEmits 来定义 props 和 emits
const props = defineProps(['isClose']);
const emit = defineEmits(['change']);

const router = useRouter();

// 创建一个响应式变量
const time = ref(null);

// 切换菜单折叠状态的方法
const change = () => {
  emit('change');
};

// 生命周期钩子 - 组件挂载后执行
onMounted(() => {
  // 获取当前时间并格式化
  time.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
});

// 退出登录方法
const out = () => {
  router.push('/');
};
</script>

<!-- 模板代码保持不变，这里省略 -->
<!--<script>-->
<!--import {ref, onMounted} from "vue";-->
<!--// import dayjs from "dayjs"-->
<!--import dayjs from "dayjs"-->
<!--import {useRouter} from "vue-router";-->

<!--export default {-->
<!--  props:['isClose'],-->
<!--  emits:['change'],//用于声明一个组件可以向外（通常是指向父组件）触发的自定义事件列表。-->
<!--  // name: "Content"-->

<!--  setup(props,{emit}){-->
<!--    //创建一个变量-->
<!--    let time = ref(null)-->
<!--    //路由-->
<!--    const router = useRouter()-->

<!--    //切换菜单是否折叠-->
<!--    const change=()=>{-->
<!--      emit('change')-->
<!--    }-->

<!--    //生命周期函数-->

<!--    onMounted(()=>{-->
<!--      //获取当前时间-->
<!--      time.value = dayjs(new Date()).format("YYYY-MM-DD hh:mm:ss")-->
<!--    })-->

<!--    //退出登录-->
<!--    const out =()=>{-->
<!--        router.push("/")-->
<!--    }-->

<!--    return{-->
<!--      change,-->
<!--      time,-->
<!--      out-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<style lang="less" scoped>
.header{
  height: 50px;
  line-height: 50px;
  background: #545c64;
  display: flex;

  .icon{
    font-size:24px ;
    color: white;
    flex: 1;
    i{
      cursor: pointer;
    }
  }

  .right{
    //float: right;
    padding-right: 20px;
    color: white;
    display: flex;
    .item{
      font-size: 14px;
    }
    .line{
      padding-left: 10px;
      padding-right: 10px;
    }
    .loginOut{
      margin-top: 4px;
      i{
        font-size: 20px;
        color: orange;
        cursor: pointer;
      }
    }
  }
}


.wrapper{
  height: 70px;


}
</style>